<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./element-ui/element-ui.css">
    <script src="./js/vue.js"></script>
    <script src="./element-ui/element-ui.js"></script>
</head>
<body>
    <div id="app">
        <!-- 
        3.4、组件分发
        - 组件名：slot :
        - 作用：针对于组件定义时的内部模板结构的操作;
                主要在组件开发时，如果模板存在一部分页面代码无法确定，
                可以通过slot 定义页面占位，当组件调用时，可以通过标签中定义 新的内容，完成 slot 的内容补充
        - 涉及属性：slot 属性 （Vue2.6.0将使用指令v-slot 替代该属性）
        -->
        <el-button type="primary">加入购物车</el-button>
        <my-button>去登陆111111</my-button>
        <my-button>去注册222222</my-button>
        <button @click=" isShow=true ">显示模态窗</button>
        <button @click=" isShow1=true ">显示模态窗</button>

        <hr>
        <el-dialog 
            :visible.sync="isShow"
            title="列表"
        >
            <ul>
                <li v-for="(item, index) in 5" :key="index">{{ item }}</li>
            </ul>
        </el-dialog>
        <el-dialog :visible.sync="isShow1">
            <template v-slot:title>
                <h3 style="text-align: center;">分发标题</h3>
            </template>
            <input type="text" name="" id="">
            <template #footer>
                <div style="text-align: right;">
                    <el-button type="warning">关闭</el-button>
                    <el-button type="primary">确定</el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</body>
<script type="text/x-template" id="btnTmp">
    <button type="button" class="el-button el-button--primary">
        <span>
            <slot></slot>
        </span>
    </button>
</script>
<script>
    Vue.component("MyButton",{
        template:"#btnTmp"
    })

    new Vue({
        el:"#app",
        data:{
            isShow:false,
            isShow1:false
        }
        
    })
</script>
</html>